<html>
<head>
<style>
body {
  font-family: 'Helvetica Neue', Helvetica, Verdana, Arial, sans-serif;
  font-size: 11pt;
  cursor: pointer;
  min-height: 40px;
  height: 40px;
  width: 275px;
}

h4 {
  color: #999;
  line-height: 20px;
  font-weight: normal;
  -webkit-margin-after: 0;
  -webkit-margin-before: 0;
}

h4 a#userlink {
  color: #4d4d4d;
  font-weight: bold;
}

h4 a {
  color: #2398c9;
  font-weight: bold;
}

a {
  cursor: pointer;
  text-decoration: none;
}

a:hover {
  cursor: pointer;
  text-decoration: underline;
}

a#userpic {
  display: block;
  float: left;
}

div#content {
  float: left;
  width: 220px;
}

a#userpic img {
  height: 40px;
  width: 40px;
  margin-right: 10px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

img#mayor {
  position: absolute;
  left: -1px;
  top: 1px;
  -webkit-transform: rotate(-30deg);
  height: 14px;
  width: 20px;
  display: none;
}

p {
  -webkit-margin-before: 0;
}

p#metadata,
p#metadata a {
  color: #b3b3b3;
  font-size: 13px;
  margin-bottom: 5px;
}

p#shout {
  background: url('images/quote.png') no-repeat;
  color: #4d4d4d;
  text-indent: 20px;
  font-size: 15px;
  margin-bottom: 10px;
}

p#event {
  color: #4d4d4d;
  font-size: 13px;
  background: url('images/event.png') no-repeat;
  text-indent: 20px;
}

p#event img {
  padding-right: 3px;
  vertical-align: bottom;
}

div#commentsContainer {
  display: none;
  background-color: whiteSmoke;
  width: 220px;
}

div#addCommentForm {
  padding: 5px;
}

div.comment {
  border-bottom: 1px solid #e8e9eb;
}

img.commentPic {
  height: 35px;
  width: 35px;
  margin-right: 10px;
  border-radius:3px;
  float:left;
}

span.commenter {
  font-weight: bold;
  margin-right: 5px;
}

span.commentText {
  font-size: 13px;
}

div.photoContainer {
  padding: 5px;
}

img.commentPhoto {
  width: 100%;
}

p.commentTime {
  font-size: 11px;
}

div#addCommentForm a {
  display: block;
  font-size: 13px;
  border: 1px solid #d9d9d9;
  color: #b6b6b6;
  background-color: #fff;
  margin-top: 3px;
  padding-left: 3px;
  line-height: 15px;
  width: 95%;
}

a#mute {
  float: right;
  font-size: 8pt;
  padding: 0 3px;
}

a.like {
  padding-left: 16px;
  background-repeat: no-repeat;

}

a.pre-like {
  background-image: url('images/pre-like.png');
}

a.post-like {
  background-image: url('images/post-like.png');
}
</style>
<script type="text/javascript" src="utils.js"></script>
</head>
<body>
  <img src="images/mayor.png" id="mayor" title="Mayor here!" />
  <a class="open_user" id="userpic"><img id="userimg" /></a>

  <div id="content">
    <h4>
      <a href="#" id="userlink" class="open_user"></a>
      @
      <a href="#" id="venuelink" class="open_venue"></a>
    </h4>
    <p id="metadata">
      <a id="ago" href="#" class="open_checkin"></a>
      &bull; <a href="#" id="open_comments">Comment</a>
      &bull; <a href="#" class="like pre-like">Like</a>
      <span id="venuecity"></span>
    </p>
    <p id="event" />
    <p id="shout" />
    <div id="commentsContainer">
      <div id="comments"></div>
      <div id="addCommentForm">
        <img class="commentPic" id="mypic"/>
        <a href="#" id="leaveComment" class="open_checkin">
          Go to the checkin to leave a comment
        </a>
        <div style="clear:both;">
      </div>
    </div>
  </div>
</body>
<script type="text/javascript" src="notification.js"></script>
</html>